<template>
	<div class="zco-message-status-container">
		<!-- 移动端不显示已下载 -->
		<div class="zco-message-status-box" v-show="!(status === 'down' && isMobile)">
			<img :src="statusIcon" alt="" srcset="" width="14px" :class="status === 'in-progress' ? 'zco-icon-loding' : ''" />
			<span class="zco-message-status-span" :style="status === 'in-progress' ? 'color:#B0B0B0;' : status === 'down' ? 'color:#40DD94;' : ''">{{ statusText }}</span>
		</div>
	</div>
</template>

<script>
import '../../assets/css/zcoIMAnimation.css';
export default {
	props: {
		status: {
			type: String,
			default: () => ''
		},
		isMobile: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			statusText: '',
			statusIcon: '',
			loadingIcon: require('../../assets/img/icon_loding.png'),
			sendSuccess: require('../../assets/img/sendSuccess.png'),
			sendFailed: require('../../assets/img/sendFailed.png')
		};
	},
	watch: {
		status(newVal, oldVal) {
			console.log('zco-im-messageStatus', newVal, oldVal, new Date());
			switch (newVal) {
				case 'in-progress':
					this.statusText = this.$t('senting');
					this.statusIcon = this.loadingIcon;
					break;
				case 'down':
					this.statusText = this.$t('downloaded');
					this.statusIcon = this.sendSuccess;
					break;
				case 'failed':
					this.statusIcon = this.sendFailed;
					this.statusText = '';
					break;
				default:
					this.statusIcon = '';
					this.statusText = '';
					break;
			}
		}
	},
	mounted() {
		switch (this.status) {
			case 'in-progress':
				this.statusText = this.$t('senting');
				this.statusIcon = this.loadingIcon;
				break;
			case 'down':
				this.statusText = this.$t('downloaded');
				this.statusIcon = this.sendSuccess;
				break;
			case 'failed':
				this.statusIcon = this.sendFailed;
				this.statusText = '';
				break;
			default:
				this.statusIcon = '';
				this.statusText = '';
				break;
		}
	}
};
</script>

<style scoped>
.zco-message-status-container {
	display: flex;
	padding: 0 8px;
	align-items: end;
	/* position: relative;
	top: 14px; */
}
.zco-message-status-span {
	/* width: 36px; */
	font-size: 12px;
	font-weight: 400;
	color: #b0b0b0;
}
.zco-message-status-box {
	/* padding-top: 18px; */
	display: flex;
	align-items: center;
}
.zco-icon-loding {
	width: 14px;
	height: 14px;
	-webkit-transform: rotate(360deg);
	animation: rotation 1.4s linear infinite;
	-moz-animation: rotation 1.4s linear infinite;
	-webkit-animation: rotation 1.4s linear infinite;
	-o-animation: rotation 1.4s linear infinite;
}
@keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
</style>
